<template>
  <view class="history-container">
<!--    顶部导航栏
    <view class="nav-bar">
      <view class="left" @tap="goBack">
        <text class="iconfont">&#xe600;</text>
      </view>
      <view class="title">浏览记录</view>
      <view class="right">
        <text class="iconfont">&#xe601;</text>
      </view>
    </view> -->

    <!-- 历史记录列表 -->
    <scroll-view scroll-y class="history-list" 
                 @scrolltolower="loadMore"
                 refresher-enabled
                 :refresher-triggered="isRefreshing"
                 @refresherrefresh="onRefresh">
      <!-- 今天 -->
      <view class="time-group">
        <text class="time-label">今天</text>
        <view class="history-item" 
              v-for="(item, index) in todayList" 
              :key="index"
              @tap="goToDetail(item)">
          <view class="content">
            <text class="title">{{item.title}}</text>
            <view class="info">
              <text class="views">{{item.viewCount}}浏览</text>
              <text class="time">{{item.time}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 更早 -->
      <view class="time-group" v-if="earlierList.length > 0">
        <text class="time-label">更早</text>
        <view class="history-item" 
              v-for="(item, index) in earlierList" 
              :key="index"
              @tap="goToDetail(item)">
          <view class="content">
            <text class="title">{{item.title}}</text>
            <view class="info">
              <text class="views">{{item.viewCount}}浏览</text>
              <text class="time">{{item.time}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todayList: [],
      earlierList: [],
      page: 1,
      hasMore: true,
      isRefreshing: false
    }
  },

  onLoad() {
    this.getHistoryList()
  },

  methods: {
    // 获取历史记录列表
    async getHistoryList(isRefresh = false) {
      try {
        if (isRefresh) {
          this.page = 1
        }
        
        const res = await uni.request({
          url: '/api/history/list',
          data: {
            page: this.page,
            pageSize: 10
          }
        })

        const { todayList = [], earlierList = [], hasMore = false } = res.data

        if (isRefresh) {
          this.todayList = todayList
          this.earlierList = earlierList
        } else {
          this.todayList = [...this.todayList, ...todayList]
          this.earlierList = [...this.earlierList, ...earlierList]
        }
        
        this.hasMore = hasMore
      } catch (error) {
        uni.showToast({
          title: '获取历史记录失败',
          icon: 'none'
        })
      }
    },

    // 加载更多
    async loadMore() {
      if (!this.hasMore) return
      this.page++
      await this.getHistoryList()
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      await this.getHistoryList(true)
      this.isRefreshing = false
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.history-container {
  min-height: 100vh;
  background: #f5f5f5;

  .nav-bar {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 30rpx;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .left {
      width: 60rpx;
      text-align: left;
    }

    .title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
    }

    .right {
      width: 60rpx;
      text-align: right;
    }
  }

  .history-list {
    margin-top: 88rpx;
    height: calc(100vh - 88rpx);
    box-sizing: border-box;

    .time-group {
      margin-bottom: 20rpx;

      .time-label {
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        color: #666;
      }

      .history-item {
        background: #fff;
        padding: 30rpx;
        border-bottom: 1rpx solid #eee;

        .content {
          .title {
            font-size: 30rpx;
            color: #333;
            line-height: 1.4;
            margin-bottom: 16rpx;
          }

          .info {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #999;

            .views {
              margin-right: 20rpx;
            }
          }
        }

        &:active {
          background: #f8f8f8;
        }
      }
    }

    .load-more {
      text-align: center;
      padding: 30rpx;
      color: #999;
      font-size: 24rpx;
    }
  }
}
</style>